<template>
  <div class="user">
    <div class="jianjie">
      <img src="../assets/img/头像男 拷贝 4.png" alt="" />
      <p>{{ remark }}</p>
      <van-row>
        <van-col span="12">
          <span>姓名：</span>
          <span>{{ nickName }}</span>
        </van-col>
        <van-col span="12">
          <span>联系方式：</span>
          <span>{{ phone }}</span>
        </van-col>
      </van-row>
    </div>
    <van-cell title="个人信息" is-link :icon="pic1" />
    <van-cell title="支付中心" is-link :icon="pic2" />
    <van-cell title="修改密码" is-link :icon="pic3" />
    <van-cell title="版本信息" is-link :icon="pic4" value="版本1.0" />
    <van-cell title="清除缓存" is-link :icon="pic5" />
    <van-tabbar v-model="active">
      <van-tabbar-item
        name="wap-home"
        icon="wap-home"
        @click="$router.push('/home')"
        >系统功能</van-tabbar-item
      >
      <van-tabbar-item name="comment" icon="comment">联系</van-tabbar-item>
      <van-tabbar-item name="user" icon="manager">个人中心</van-tabbar-item>
    </van-tabbar>
    <div class="btn">
      <van-button type="primary" block @click="backLoginClick"
        >退出登录</van-button
      >
      <van-popup v-model="isShowPopup">内容</van-popup>
    </div>
  </div>
</template>

<script>
import { GetUserListData } from "@/request/api";
export default {
  data() {
    return {
      active: "user",
      pic1: require("../assets/img/Personal information.png"),
      pic2: require("../assets/img/形状 2.png"),
      pic3: require("../assets/img/change Password.png"),
      pic4: require("../assets/img/版本信息.png"),
      pic5: require("../assets/img/组 16.png"),
      remark: "个人简介",
      phone: "",
      nickName: "",
      isShowPopup: false,
    };
  },
  created() {
    GetUserListData().then((res) => {
      console.log(res);
      this.remark = res.data.remark;
      this.phone = res.data.phone;
      this.nickName = res.data.nickName;
    });
  },
  methods: {
    backLoginClick() {
      // this.isShowPopup = true
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认退出？",
        })
        .then(() => {
          // on confirm
          localStorage.removeItem("token");
          this.$router.push("/login")
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.user {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  padding: 100px 20px 0;
  box-sizing: border-box;
}
.jianjie {
  padding-top: 90px;
  width: 100%;
  height: 140px;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 10px;
  /* position: relative; */
  img {
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -63px;
  }
  p {
    text-align: center;
  }
  .van-row {
    line-height: 30px;
    padding: 0 15px;
  }
}
.van-icon__image {
  width: 16px;
  height: 16px;
}
.btn {
  padding: 70px 0 30px;
  .van-button--primary {
    color: #000;
    background-color: #ccc;
    border: #ccc;
  }
}
</style>